/**
 * 缩放相关样式
 * 用于处理浏览器缩放时的特殊样式调整
 */

/* 缩放检测的基础样式 */
:root {
  --zoom-level: 1;
  --zoom-level-percent: 100%;
}

/* 缩小时的样式调整 */
.zoom-out {
  /* 对某些使用vw的元素在缩放时进行补偿 */
  .zoom-free {
    /* 缩放时恢复元素原本尺寸 */
    transform: scale(calc(1 / var(--zoom-level)));
    transform-origin: top left;
  }
  
  /* 在缩小模式下对日志容器的特殊处理 */
  .log-manage-info {
    .log_container, 
    .split-log-container,
    .control-panel {
      /* 缩小时尺寸使用像素值而非vw单位 */
      width: auto !important;
      height: auto !important;
      max-height: none !important;
      
      /* 恢复滚动行为 */
      overflow: auto !important;
    }
    
    /* 确保按钮在缩小时仍然可见和可点击 */
    .buttons-container .tech-btn {
      /* 在缩小模式下确保按钮可见 */
      min-height: 36px;
      min-width: 80px;
      white-space: nowrap;
      padding: 0 10px !important;
    }
  }
  
  /* 保持页面布局不受缩放影响的元素 */
  [class*="width-"], 
  [class*="height-"],
  [class*="size-"] {
    /* 这些类使用的是vw单位，缩放时需要特殊处理 */
    transform: scale(calc(1 / var(--zoom-level)));
    transform-origin: top left;
  }
}

/* 放大时的样式调整 */
.zoom-in {
  /* 放大时需要对某些元素进行调整 */
  .zoom-sensitive {
    /* 对敏感元素进行缩放补偿 */
    transform: scale(calc(1 / var(--zoom-level)));
    transform-origin: top left;
  }
}

/* 当浏览器缩放到小于80%时的特殊处理 */
.zoom-level-50,
.zoom-level-60,
.zoom-level-67,
.zoom-level-75 {
  /* 超小缩放比例下的样式调整 */
  .small-text {
    /* 确保文本在小比例下仍然清晰可见 */
    font-size: calc(14px / var(--zoom-level)) !important;
  }
  
  /* 调整图表和复杂组件的显示 */
  .chart-container {
    min-height: 300px;
  }
}

/* 对指定区域不使用vw单位的通用类 */
.use-px {
  /* 强制使用像素单位 */
  font-size: 14px !important;
  width: auto !important;
  height: auto !important;
  
  /* 禁用vw单位的边距和内边距 */
  margin: 0 !important;
  padding: 10px !important;
  
  /* 所有子元素都使用像素单位 */
  * {
    font-size: inherit !important;
    width: auto !important;
    height: auto !important;
  }
} 